<script lang="tsx">
/**
 * 功能框
 */
export default {
  name: "program-form"
}
</script>

<script lang="tsx" setup>
import ProgramFormManager from "./program-form-manager.ts"
import {ref, watch} from "vue"
import Render from "../../../core/render/index.vue"

/**
 * 定义emit
 */
const emit = defineEmits()

/**
 * 定义props
 */
const props = defineProps<{
  programFormModel?: ProgramFormManager
}>()

/**
 * 功能表单组件
 */
const programFormModel = ref<ProgramFormManager>()

/**
 * 是否显示
 */
const isShow = (item: any) => {
  const func = item.isShow as Function
  if (!func) {
    return true
  }
  return func()
}

/**
 * 监视
 */
watch(() => props.programFormModel, function (newValue: any) {
  if (newValue) {
    programFormModel.value = newValue
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="program-form">
    <el-scrollbar class="program-form-scrollbar">
      <div class="program-form-content">
        <div v-for="(item,index) of programFormModel?.els" v-show="isShow(item)" :key="index">
          <Render :item="item" :renderType="'program'" class="form-item" v-bind="$attrs"/>
        </div>
      </div>
    </el-scrollbar>
    <div v-if="$slots.right" class="program-form-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.program-form {
  margin: 5px;
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 0 5px;

  .program-form-scrollbar {
    flex: 1;
    width: 0;
    white-space: nowrap;

    :deep(.el-scrollbar__bar.is-horizontal) {
      height: 6px;
    }

    .program-form-content {
      display: flex;
      padding: 8px 0;
      min-width: 0; // 允许flex项目收缩至小于内容宽度

      .form-item {
        margin: 0 5px;
        padding: 0 18px;
        flex-shrink: 0; // 防止表单项压缩

        :deep(.el-button) {
          border-radius: 6px;
          box-shadow: 0 2px 6px 0 rgba(64, 158, 255, 0.2);

          &:hover {
            transform: scale(1.05);
            transition: transform 0.2s;
            box-shadow: 0 4px 10px 0 rgba(64, 158, 255, 0.3);
          }
        }
      }
    }
  }

  .program-form-right {
    flex-shrink: 0;
  }
}
</style>